<template>
  <div class="register">
    <!-- <NavBar style="margin-top: 1rem;width: 98%;margin-left: 1%">
      <span slot="search">用户关联</span>
    </NavBar> -->
    <div class="_2EfetPMmU0imM7hLRFJzr1" id="sidebarBox"></div>
    <div class="register__StyledCon-gfrfo0-0 iWgeis">
      <!-- <img src="https://openplantform.oss-cn-beijing.aliyuncs.com/account/register_background.png?OSSAccessKeyId=LTAI4FvBYgUM9wyFK4wa9nvy&amp;Expires=5178643850&amp;Signature=R%2BxRJ8evNFtOwy6Ni3Pi67paUGo%3D" alt="background" class="background-img" /> -->
      <div class="center-box">
        <div class="center-box-logo-img">
          <span style="color: black; font-weight: 900">首次登录验证</span>
        </div>
        <div class="center-box-top">
          <div class="center-box-msg"></div>
        </div>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="10px"
          class="ele-ruleForm"
          autocomplete="off"
          @keyup.enter.native="submitForm('ruleForm')"
        >
          <el-form-item prop="username">
            用户名：<el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="new-password"
              class="el-input-pass"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            手机号：<el-input
              type="text"
              v-model="ruleForm.password"
              autocomplete="new-password"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <span style="color: black"
              >温馨提示：首次访问需要核验您在系统中的账号信息，请输入您在"粤政易"预留的手机号</span
            >
          </el-form-item>
          <el-form-item>
            <div
              style="
                width: 99vw;
                text-align: center;
                transform: translateX(-5%);
              "
            >
              <el-button
                type="primary"
                style="width: 20vw"
                @click="submitForm()"
                >确定</el-button
              >
              <el-button
                type="primary"
                style="width: 20vw"
                @click="submitForm2()"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <van-popup v-model="shoulm">
      <div class="con_box">
        <h3>{{ text.title }}</h3>
        <p>{{ text.message }}</p>
        <div class="btnv">
          <span @click="handleClose()" v-if="text.btn.cancelText">
            {{ text.btn.cancelText }}
          </span>
          <span @click="handleClose()" v-if="text.btn.okText">
            {{ text.btn.okText }}
          </span>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="shoulm1">
      <div class="con_box">
        <h3>{{ text1.title }}</h3>
        <p>{{ text1.message }}</p>
        <div class="btnv">
          <span @click="handleClose1()" v-if="text1.btn.cancelText">
            {{ text1.btn.cancelText }}
          </span>
          <span @click="handleClose1()" v-if="text1.btn.okText">
            {{ text1.btn.okText }}
          </span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import NavBar from "./NavBar";
import { saveDTalkRelUserInfo, Login, getUserInfoGSa } from "../../utils/api";
export default {
  name: "Register",
  methods: {
    //去登录页面
    handleClose() {
      this.shoulm = false;
    },
    handleClose1() {
      this.shoulm1 = false;
    },
    submitForm2() {
      this.shoulm1 = true;
    },
    submitForm: async function () {
      let prm = {
        accountId: window.sessionStorage.getItem("accountId") || "",
        phone: this.ruleForm.password,
        idNum: this.ruleForm.password,
        type: 4,
        username: window.sessionStorage.getItem("name1") || "",
      };
      const res = await saveDTalkRelUserInfo(prm);
      try {
        if (res.data.code == 200) {
          this.submitForm1(
            res.data.data.gsaRbacUserHZ.username,
            res.data.data.gsaRbacUserHZ.password
          );
        } else {
          this.shoulm = true;
        }
      } catch (err) {
        console.log(err);
      }
    },
    submitForm1: async function (data, data1) {
      const res = await Login(data, data1);
      if (res.data.code == 200) {
        //发起请求获取token
        const getUserData = await getUserInfoGSa(res.data.data);
        if (getUserData.data.code == 200) {
          let code1 = getUserData.data.data.deptId.slice(0, 4) + "00000000";
          window.localStorage.setItem("citycode", code1);
          //是否注册
          window.localStorage.setItem(
            "ISZHUCE",
            getUserData.data.data.bizUserId
          );
          window.localStorage.setItem(
            "userName",
            JSON.stringify({
              loginName: getUserData.data.data.username,
              userName: getUserData.data.data.username,
              userId: getUserData.data.data.bizUserId,
              idcard: "",
            })
          );
        }
        this.$router.push({
          path: "/FeatureList",
        });
        window.localStorage.setItem("token", res.data.data);
      } else {
        this.$message.error("登录失败！");
      }
    },
  },
  data() {
    return {
      username: window.sessionStorage.getItem('name1'),
      password: "",
      text: {
        title: "温馨提示",
        message: "抱歉，未查询到您在'粤政易'的账号信息，请联系管理员核实。",
        btn: {
          okText: "确认",
          cancelText: "取消",
        },
      },
      text1: {
        title: "温馨提示",
        message: "没有关联账号，您将不能访问本系统！",
        btn: {
          okText: "确认",
          cancelText: "取消",
        },
      },
      againPassword: "",
      registering: false,
      userId: "",
      registerStyle: "",
      systemname: "",
      shoulm1: false,
      shoulm: false,
      DanDianName: {},
      UUID: "",
      ruleForm: {
        username: window.sessionStorage.getItem('name1'),
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
      },
      checked: true,
    };
  },
  components: {},
};
</script>

<style scoped lang="scss">
.register {
  height: 100vh;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  .con_box {
    width: 270px;
    line-height: 1;
    text-align: center;
    color: #4d5c82;
    padding: 15px;
    box-sizing: border-box;
    > h3 {
      font-size: 20px;
      margin-top: 10px;
      margin-bottom: 20px;
    }
    > p {
      font-size: 17px;
      margin-bottom: 30px;
    }
    .btnv {
      display: flex;
      justify-content: space-between;
      > span {
        display: block;
        width: 114px;
        background-color: #e0e5f5;
        text-align: center;
        line-height: 44px;
        font-size: 17px;
      }
      > span:last-of-type {
        background-color: #1288fe;
        color: #ffffff;
      }
    }
  }
}
._2EfetPMmU0imM7hLRFJzr1 {
  position: fixed;
  right: 0;
  top: 70%;
  z-index: 10;
  box-shadow: 0px 1px 11px 0px rgba(0, 0, 0, 0.15);
}
.iWgeis {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgb(247, 247, 247);
  overflow: scroll;
}
.iWgeis .background-img {
  width: 100%;
  position: absolute;
  bottom: 0px;
}
.iWgeis .center-box {
  /* width: 300px; */
  height: 100vh;
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
  /* top: 184px; */
  padding: 20px 20px 30px;
  border-radius: 10px;
  box-shadow: rgb(225, 232, 248) 0px 0px 10px;
  background: white;
}
.iWgeis .center-box .center-box-logo-img {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}
img {
  vertical-align: middle;
}
.iWgeis .center-box .center-box-logo-outer {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.iWgeis .center-box .center-box-top {
  margin: 0px auto;
  /* width: 100px; */
}
.iWgeis .center-box .center-box-msg {
  height: 36px;
  line-height: 36px;
  color: rgb(208, 2, 27);
  text-align: center;
  font-size: 14px;
}
.ele-ruleForm {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  width: 100%;
}
</style>

<style>
.register .el-form-item__content {
  margin-left: 0 !important;
}
.register .el-input__inner {
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  border-bottom: 1px solid rgb(239, 239, 239);
  border-radius: 0px;
}
.register .el-button {
  margin-top: 10px;
  /* padding: 12px 150px; */
}
.register .el-input {
  width: 80% !important;
}
</style>
